<template>
  <div class="navbar" :style="'color:'+variables.menuText+';background-color:'+variables.menuBg">
    <template v-if="device!=='mobile'">
      <div class="left-menu">
        <img class="logo" src="../../assets/logo.png" alt="Piece博客">
        <span class="left-menu-item">
          <el-menu
            :default-active="activeMenu"
            :background-color="variables.menuBg"
            :text-color="variables.menuText"
            mode="horizontal"
          >
            <el-menu-item index="/" @click.native="handleClassifyRoute('/')">首页</el-menu-item>
            <el-submenu index="/home">
              <template slot="title">分类</template>
              <el-menu-item
                v-for="menu in classify"
                :key="menu.dictValue"
                :item="menu"
                :index="'/home/' + menu.dictValue"
                @click.native="handleClassifyRoute('/home', menu.dictValue)"
              >
                {{ menu.dictLabel }}
              </el-menu-item>
            </el-submenu>
            <el-menu-item index="/about" @click.native="handleClassifyRoute('/about')">关于</el-menu-item>
          </el-menu>
        </span>
      </div>
      <div class="right-menu">
        <search id="header-search" class="right-menu-item" @change="handleKeywordRoute" />
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="hover" size="small">
          <div class="avatar-wrapper">
            <img :src="getImageSrc(user.avatar)" class="user-avatar">
            <i class="el-icon-caret-bottom" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <el-dropdown-item v-if="!user.userId" @click.native="userLogin">
              <span style="display:block;"><i class="el-icon-user" />请登录</span>
            </el-dropdown-item>
            <el-dropdown-item v-if="user.userId" @click.native="userCenter">
              <span style="display:block;"><i class="el-icon-user" />个人中心</span>
            </el-dropdown-item>
            <el-dropdown-item v-if="user.userId" @click.native="createBlog">
              <span style="display:block;"><i class="el-icon-edit" />写文章</span>
            </el-dropdown-item>
            <el-dropdown-item @click.native="setting = true">
              <span style="display:block;"><i class="el-icon-set-up" />页面布局</span>
            </el-dropdown-item>
            <el-dropdown-item v-if="user.userId" divided @click.native="logout">
              <span style="display:block;"><i class="el-icon-switch-button" />退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </template>
    <template v-else>
      <div class="nav-mobile">
        <div class="nav-mobile-logo" @click.native="setting = true">
          <img class="logo fl" src="../../assets/logo.png" alt="Piece博客">
        </div>
        <div class="menu" :style="'color:' + themeColor" @click="handleShowMenu"><i class="el-icon-menu" /></div>
      </div>
      <div v-if="showMenu" class="nav-mobile-content" :class="{'enter-slideUp': enterSlideUp,'leave-slideDown': leaveSlideDown}" :style="'color:'+variables.menuText+';background-color:'+variables.menuBg">
        <div class="list">
          <div v-if="!user.userId" class="item"><span @click.native="userLogin"><img :src="getImageSrc()" class="user-avatar">请登录</span></div>
          <div v-if="user.userId" class="item"><span @click.native="userCenter"><img :src="getImageSrc(user.avatar)" class="user-avatar"></span></div>
          <div v-if="user.userId" class="item"><span @click.native="createBlog"><i class="el-icon-edit" />写文章</span></div>
          <div v-if="user.userId" class="item"><span @click.native="logout"><i class="el-icon-switch-button" />退出</span></div>
          <div class="item"><span @click.native="handleClassifyRoute('/')">首页</span></div>
          <div v-for="(menu) in classify" :key="menu.dictValue" class="item">
            <span @click.native="handleClassifyRoute('/home',menu.dictValue)">{{ menu.dictLabel }}</span>
          </div>
          <div class="item"><span @click.native="handleClassifyRoute('/about')">关于</span></div>
        </div>
      </div>
      <div v-if="showMenu" class="mask" :class="{'mask-fade-out': leaveSlideDown}" @click="handleHideMenu" />
    </template>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import variables from '@/styles/variables.scss'
import FixiOSBug from './FixiOSBug'
import Search from '@/components/HeaderSearch'

export default {
  components: { Search },
  mixins: [FixiOSBug],
  data() {
    return {
      time: new Date(),
      timer: undefined,
      classify: [],
      enterSlideUp: false,
      leaveSlideDown: false,
      showMenu: false,
      keyword: ''
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'device'
    ]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings
      },
      set(val) {
        this.$store.dispatch('settings/changeSetting', {
          key: 'showSettings',
          value: val
        })
      }
    },
    activeMenu() {
      const route = this.$route
      const { path } = route
      return path
    },
    variables() {
      return variables
    },
    themeColor() {
      return this.$store.state.settings.theme
    }
  },
  mounted() {
    const _this = this
    this.timer = setInterval(() => {
      _this.time = new Date()
    }, 1000)
    this.getDictData()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    getImageSrc(src) {
      return this.$api.getImageSrc(src)
    },
    classifyQuery(value) {
      if (value) {
        return {
          classify: value
        }
      }
      return {}
    },
    keywordQuery(value) {
      if (value) {
        return {
          keyword: value
        }
      }
      return {}
    },
    getDictData() {
      this.$http.get('/blog/dic/group?group=blog_article_channel').then(response => {
        this.classify = response.param
      }).catch(e => {})
    },
    handleShowMenu() {
      this.showMenu = true
      this.enterSlideUp = true
    },
    handleHideMenu() {
      this.enterSlideUp = false
      this.leaveSlideDown = true
      setTimeout(() => {
        this.leaveSlideDown = false
        this.showMenu = false
      }, 300)
    },
    async handleClassifyRoute(path, param) {
      const query = this.classifyQuery(param)
      this.$router.push({ path: path, query: query })
    },
    async handleKeywordRoute(path, param) {
      const query = this.keywordQuery(param)
      this.$router.push({ path: path, query: query })
    },
    async userLogin() {
      this.$router.push(`/login?redirect=${this.$route.fullPath}`)
    },
    async userCenter() {
      this.$router.push(`/center?userId=${this.user.userId}&redirect=${this.$route.fullPath}`)
    },
    async createBlog() {
      this.$router.push(`/create?redirect=${this.$route.fullPath}`)
    },
    async logout() {
      this.$confirm('确定退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('user/logout').then(() => {
          this.$router.push(`/login?redirect=${this.$route.fullPath}`)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.navbar {
  height: 60px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);

  .left-menu {
    height: 100%;
    line-height: 60px;
    text-align: center;
    width: 75%;

    &:focus {
      outline: none;
    }

    .logo {
      height: 90%;
      border-radius: 50%;
      margin-top: 2px;
      margin-left: 100px;
      margin-right: 30px;
    }

    .left-menu-item {
      display: inline-block;
      padding: 0 0;
      height: 100%;
      font-size: 18px;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;

        &:hover {
          background: rgba(0, 0, 0, 0.055)
        }
      }
    }
  }

  .right-menu {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    line-height: 60px;

    &:focus {
      outline: none;
    }

    .right-menu-item {
      display: inline-block;
      padding: 0 8px;
      height: 100%;
      font-size: 18px;
      vertical-align: text-bottom;

      &.hover-effect {
        cursor: pointer;
        transition: background .3s;
      }
    }

    .avatar-container {
      margin-right: 30px;

      .avatar-wrapper {
        margin-top: 10px;
        position: relative;

        .user-avatar {
          cursor: pointer;
          width: 45px;
          height: 45px;
          border-radius: 10px;
        }

        .el-icon-caret-bottom {
          cursor: pointer;
          position: absolute;
          right: -10px;
          top: 5px;
          font-size: 12px;
        }
      }

      .user-dropdown .el-dropdown-menu__item {
        line-height: 50px!important;
      }
    }
  }
}

.el-dropdown-menu {
  top: 50px!important;
}
</style>

<style lang="less" scoped>
.nav-mobile {
  display: flex;
  line-height: 60px;

  .nav-mobile-logo {
    flex: 1;
    .logo {
      border-radius: 50%;
      margin-top: 2px;
      margin-left: 10px;
      margin-right: 30px;
    }
  }

  .menu {
    flex: 1;
    font-size: 34px;
  }
}

.nav-mobile-content {
  font-size: 30px;
  height: 100%;
  width: 100%;

  .list {
    .item {
      line-height: 60px;
      border-bottom: 1px solid #eee;
      span {
        display: block;
        width: 100%;

        .user-avatar {
          cursor: pointer;
          width: 40px;
          height: 40px;
          border-radius: 10px;
        }
      }
    }
  }
}

.enter-slideUp,
.leave-slideDown {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1601;
}

.enter-slideUp {
  overflow: auto;
  visibility: visible;
  z-index: 1601;
  animation: slideUp 0.3s forwards;
}

.leave-slideDown {
  visibility: visible;
  z-index: 1601;
  animation: slideDown 0.3s forwards;
}

@keyframes slideUp {
  from {
    transform: translate3d(0, 100%, 0);
    opacity: 0.1;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes slideDown {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
}

.mask {
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.5;
}

.mask-fade-out {
  animation: maskFadeOut 0.4s forwards;
}

@keyframes maskFadeOut {
  from {
    opacity: 0.5;
  }
  to {
    opacity: 0;
  }
}
</style>
